<template>
  <div class="operationPageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="10">
            <el-col :span="6">
              <div class="searchWrap">
                <span class="searchFont">预警类型:</span>
                <span class="searchInputFont">
                 <el-select v-model="searchInfo.alarmType" @change="searchRowsInfo()" size="mini" clearable placeholder="预警类型">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="searchWrap">
                <span class="searchFont">区域名称:</span>
                <span class="searchInputFont">
                    <el-input style="width: 100%;" clearable size="mini" v-model="searchInfo.areaName"  @change="searchRowsInfo" auto-complete="off" placeholder="区域名称"></el-input>
                </span>
              </div>

            </el-col>
            <el-col :span="6">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" style="width: 100%;">
                  <el-select v-model="searchInfo.districtId"  :disabled="$store.state.userInfo.regionId?true:false" @change="searchRowsInfo()" size="mini"
                             clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>

            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
            </div>
          </el-row>
        </div>
        <div class="infoSearchOne">
          <el-row :gutter="10">
            <el-col :span="6">
              <div class="searchWrap">
                <span class="searchFont">是否立案:</span>
                <span class="searchInputFont">
                 <el-select v-model="searchInfo.pushStatus" @change="searchRowsInfo()" size="mini" clearable placeholder="是否立案">
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="searchWrap">
                <span class="searchFont">预警编号:</span>
                <span class="searchInputFont">
                    <el-input style="width: 100%;"  clearable size="mini" v-model="searchInfo.alarmNo"
                              @change="searchRowsInfo" auto-complete="off" placeholder="预警编号"></el-input>
                </span>
              </div>

            </el-col>
          </el-row>
        </div>
      </div>
      <div class="tableContainer" style="top:120px;">
        <div class="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="预警编号"
              prop="alarmNo"
              width="160"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="预警类型"
              prop="alarmType"
            >
              <template slot-scope="scope">
                {{scope.row.alarmType == 0 ? '违规投放' : scope.row.alarmType == 1 ? '区域超量' : scope.row.alarmType == 2 ? '乱停乱放' :scope.row.alarmType == 3 ? '回收告警' : ""}}

              </template>
            </el-table-column>
            <el-table-column
              label="企业"
              prop="enterpriseName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="行政区"
              prop="districtName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="行政街道"
              prop="streetName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="监管区域名称"
              prop="areaName"
              width="160"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="区域类型"
              prop="areaType"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.areaType == 0 ? '停放区' : scope.row.areaType == 1 ? '禁停区' : scope.row.areaType == 2 ? '规范停放区' : scope.row.areaType == 3 ? '动态停放区' : scope.row.areaType == 4 ? '临时监控区' : ""}}
              </template>
            </el-table-column>
            <el-table-column
              label="预警次数"
              prop="alarmCount"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="createTime"
              width="140"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="是否立案"
              prop="pushStatus"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.pushStatus == 0 ? '未立案' : scope.row.pushStatus == 1 ? '已立案' : ""}}

              </template>
            </el-table-column>
            <el-table-column
              v-if="$store.state.btnMenuIds.indexOf(141)>-1"
              label="操作"
            >
              <template slot-scope="scope">
                <i @click='getDetail(scope.row)' class="iconfont icon-chakan" ></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationWrap">
          <el-row :gutter="10">
            <el-col :span="13" :offset="9">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchInfo.page"
                :page-sizes="[10, 30, 50, 100,200]"
                :page-size="searchInfo.rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <btnDetail ref="btnDetail"></btnDetail>
    <mapdialog ref="mapdialog"></mapdialog>
  </div>
</template>

<script>
  import btnDetail from "./btnDetail.vue"
  import mapdialog from "./mapdialog.vue"
  export default {
    props: [],
    data(){
      return {
        options1: [
          {
            value: '0',
            label: '未立案'
          }, {
            value: '1',
            label: '已立案'
          }],
        options: [
          {
            value: '0',
            label: '违规投放'
          }, {
            value: '1',
            label: '区域超量'
          }, {
            value: '2',
            label: '乱停乱放'
          }, {
            value: '3',
            label: '回收告警'
          }],
        streetData: [],
        tableHeight: 400,
        checkInfo: {},
        rows: [],
        count: 0,
        searchInfo: {
          "alarmType": "",
          "districtId": this.$store.state.userInfo.regionId,
          "alarmNo": "",
          "pushStatus": "",
          "areaName": "",
          page: 1,
          rows: 10,
        },
      }
    },
    components: {btnDetail,mapdialog},
    created(){
      this.searchRowsInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格高度
        this.tableHeight = document.querySelector(".operationPageWrap").clientHeight - 200
      })
    },

    methods: {
      getDetail(row){
//        this.checkInfo = row
        if(row.areaType==null){
          this.$refs.btnDetail.dialogOpen(row.id)
        }else {
          this.$refs.mapdialog.dialogOpen(row.id)
        }

      },

      //获取所有信息
      searchRowsInfo(val){
        val ?"":this.searchInfo.page=1
        this.axios.post(process.env.API_HOST + `/vehicle/selectAlarmGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo(val)

      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .operationPageWrap
    page()
</style>
